<template lang="pug">
  el-drawer.commonDrawer(
    title="亲子活动指引"
    :visible.sync="visibleDialog"
    v-loading="loading"
    custom-class="commonDrawer"
    direction="rtl"
    size="840px"
    append-to-body
    destroy-on-close
    modal-append-to-body
  )
    .drawer-content
      div(class="content")
        div(v-for="(item, index) in list" :key="index" class="item" @click="itemClick(index)") {{item.title}}
</template>
<script>
import { mapGetters } from 'vuex'
import { getCourseAppendix } from '../api'

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      loading: false,
      list: []
    }
  },
  computed: {
    ...mapGetters(['curArea']),
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visible (val) {
      if (val) {
        this.getData()
      }
    }
  },
  created () {
  },
  methods: {
    // 获取目录
    getData () {
      getCourseAppendix().then(res => {
        console.log(res)
        this.list.push(res[0])
        this.list.push(res[0])
        this.list.push(res[0])
        this.list.push(res[0])
      })
    },

    itemClick (index) {
      const item = this.list[index]
      window.open(item.url)
    },

    $_handleCancel () {
      this.visibleDialog = false
    }
  }
}
</script>
<style lang="scss" scoped>
  .content{
    display: flex;
    flex-direction: column;

    .item{
      font-size: 15px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      margin-top: 10px;
      margin-bottom: 10px;
      border-bottom: #E8E8E8 dashed 1px;
    }
  }

</style>
